<!-- 改变想法，现在打算做一个商城类的项目，然后用上vuex -->
<template>
    <div class="pc-login-wrap">
      <!-- 登录或者注册 -->
    <a-modal v-model="isShowLoginAndRegister" :footer="null">
        <div class="login-and-register-wrap">
          <a-row :gutter="32" type="flex" justify="center">
            <a-col :span="12">
              <div class="left">
                <img src="../assets/img.jpg" alt="">
              </div>
            </a-col>
            <a-col :span="12">
              <div class="right">
                <a-form-model :model="form" @submit="handleSubmit" @submit.native.prevent>
                  <a-form-model-item>
                    <a-input v-model="form.account" placeholder="Username">
                      <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
                    </a-input>
                  </a-form-model-item>
                  <a-form-model-item>
                    <a-input v-model="form.password" type="password" placeholder="Password">
                      <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
                    </a-input>
                  </a-form-model-item>
                  <a-form-model-item>
                    <a-button
                        type="primary"
                        html-type="submit"
                        style="width: 100%"
                        :disabled="form.account === '' || form.password === ''"
                    >
                      Log in
                    </a-button>
                  </a-form-model-item>
                </a-form-model>
                <div class="register-info">
                  <div class="info">如没有注册账号，则自动注册</div>
                </div>
              </div>
            </a-col>
          </a-row>
        </div>
    </a-modal>
    </div>
  </template>
  
  <script>
  import {loginAndRegister} from "@/api/request";
  import { bus } from '@/assets/js/bus.js';
  export default {
    name: 'pcLoginWrap',
    components: {
      
    },
    data(){
        return{
            isShowLoginAndRegister:true,
            form: {
                account: '',
                password: '',
            },
        }
    },
    watch:{
        isShowLoginAndRegister(newValue,oldValue){
            if(newValue!==oldValue){
                this.form={
                account: '',
                password: '',
                }
            }
        },
    },
    
    methods:{
        handleSubmit() {
      loginAndRegister(this.form).then(res=>{
        if(res.data.status===0){
          this.isShowLoginAndRegister=false
          if(res.data.message==="登录成功！"){
            
            localStorage.setItem('token',res.data.token)
            
            this.$message.success('登录成功！')
            // 0表示登录成功，1表示注册成功，-1表示都失败
            bus.$emit('successLoginAndRegister', 0);
            this.$router.push('/')
            
          }else{
            localStorage.setItem('token',res.data.token)
            this.$message.success('注册成功！')
            bus.$emit('successLoginAndRegister', 1);
            this.$router.push('/')
          }
        }else {
          this.$message.error('登录或注册失败！')
        }
      })
    },
    }
  }
  </script>
  
  <style scoped lang="less">

  </style>
  